<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <body>

        <table  class="table">
            <a href="./add.html" class="btn btn-primary">增加博客</a>
          <thead>
            <tr><th>id</th><th>标题</th><th>内容</th> <th>操作</th> </tr>
          </thead>
          <tbody></tbody>
        </table>
      </body>

</body>
</html> 



<script>
$(function(){
    
    $(document).ready(function(){
// 发送请求查询语句
$.get('select.php',function(res){
    var tr=''
   $(res.msg).each(function(index,element){
    console.log(element)
    var td=`<tr><td>${element.id}</td><td>${element.title}</td><td>${element.content}</td><td><button data-id="${element.id}" class="btn btn-danger">删除</button></td></tr>`
    tr+=td
   })
   $('tbody').html(tr)
},'json')
})

})

// 点击删除
$('tbody').on('click','button',function(){
   var id = $(this).data('id')
   $.get('./del.php?id='+id,function(res){
   if(res.msg=='ok'){
       $('tbody').html('')
// 发送请求查询语句
$.get('select.php',function(res){
    var tr=''
   $(res.msg).each(function(index,element){
    console.log(element)
    var td=`<tr><td>${element.id}</td><td>${element.title}</td><td>${element.content}</td><td><button data-id="${element.id}">删除</button></td></tr>`
    tr+=td
   })
   $('tbody').html(tr)
},'json')
   }
},'json')
})

</script>